<template>
  <div class="rebate-main">
    <div class="rebate-main-left">
      <div class="top">
        <div class="top-left">
          <div class="dot-common"></div>
          <div class="text-small">
            <span class="text">金币账户</span>
            <span class="small">1个金币=1元</span>
          </div>
        </div>
        <div class="top-right">
          <!-- <div class="button">立即提现</div>
          <div class="button">立即充值</div> -->
        </div>
      </div>
      <div class="top-second">
        <div class="part">
          <span class="title">我的分销数据</span>
          <div class="source">
            <div class="source-part">
              <p class="overOne">{{ userInfo.distribution.sale }}</p>
              <p>我的推荐</p>
            </div>
            <div class="source-part">
              <p class="overOne">
                {{ twoFixed(userInfo.distribution.unsettled) }}
              </p>
              <p>未结算</p>
            </div>
            <div class="source-part">
              <p class="overOne">
                {{ twoFixed(userInfo.distribution.accumulate) }}
              </p>
              <p>累计收入</p>
            </div>
          </div>
        </div>

        <div class="part">
          <span class="title">我的返利</span>
          <div class="source">
            <div class="source-part">
              <p class="overOne">{{ twoFixed(userInfo.rebate.accumulate) }}</p>
              <p>未结算</p>
            </div>
            <div class="source-part">
              <p class="overOne">{{ twoFixed(userInfo.rebate.unsettled) }}</p>
              <p>累计返利</p>
            </div>
          </div>
        </div>

        <div class="part">
          <span class="title">我的金币</span>
          <div class="source">
            <div class="source-part">
              <p class="overOne">{{ twoFixed(userInfo.gold) }}</p>
              <router-link to="/account/rebate/detail/index" class="text" >明细</router-link>

            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <Balance
          :showTitle="true"
          :showTop="false"
          :column="[
            {
              title: '我的推荐',
            },
            {
              title: '未结算订单 (分销)',
            },
            {
              title: '累计收入订单明细 (分)',
            },
            {
              title: '返利订单明细',
            },
            {
              title: '未结算订单 (返利)',
            },
          ]"
          title="余额变动明细"
          v-model:activeName="activeName"
          :searchPlaceholder="`搜索流水号和订单号`"
        >
        </Balance>

        <div class="table-container">
          <Table
            :topCss="{
              background: '#f5f8fe',
              height: '.3042rem',
              fontSize: '.0893rem',
            }"
            :data-source="rebateData"
            :showTop="false"
            :tdCss="{
              fontSize: '.07rem',
              padding: '.04rem',
            }"
            :lineCss="{
              height: `.2188rem`,
              background: '#f5f8fe',
            }"
            :borderSpacing="`0 .0729rem`"
            headerFamily="PuHuiMedium"
            :headerFontSize="`400`"
            :column="column"
          >
            <template #userInfo="{ row }">
              <div class="table-row">
                {{ row.nickName }}ID:{{ row.user_id }}
              </div>
            </template>
            <template #consume="{ row }">
              <div class="table-row">累计消费金额:{{ row.consume }}</div>
            </template>
            <template #rebate="{ row }">
              <div class="table-row">返利金额:{{ row.rebate }}</div>
            </template>
          </Table>
        </div>
      </div>
    </div>

    <div class="right-qrcode">
      <div class="title">
        <div class="dot-common"></div>
        <span>推广海报</span>
      </div>
      <div class="poster">
        <img :src="publicUrl(`/images/poster-qrcode.jpg`)" />
      </div>

      <div class="button thumb" @click="downPoster">下载海报</div>

      <div class="title title-second">
        <div class="dot-common"></div>
        <span>推广链接</span>
      </div>

      <a
        href="https://wwwyuncai-scm.com/werwe001"
        class="url thumb"
        target="_blank"
      >
        {{ link }}
      </a>

      <div class="button thumb" @click="() => copyHandel(link)">
        复制推广链接
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref,watch } from "vue";
import { publicUrl, twoFixed, aDownLoad } from "@/utils/util";
import Balance from "@/components/Balance/index.vue";
import Table, { Column } from "@/components/Table";
import { useClipboard } from "@vueuse/core";
import { toast } from "vue3-toastify";
import { useRouter,useRoute } from "vue-router";

interface UserInfo {
  distribution: {
    sale: number;
    unsettled: number;
    accumulate: number;
  };
  rebate: {
    unsettled: number;
    accumulate: number;
  };
  gold: number;
}

interface Rebate {
  nickName: string;
  user_id: string;
  create_time: string;
  consume: number;
  rebate: number;
}

const link = ref<string>("https://wwwyuncai-scm.com/werwe001");

const { copy } = useClipboard();

const route = useRoute();

const activeName = ref<number>(0);

watch(()=>route.path,(newValue:string)=>{
      if(newValue === '/account/rebate/index'){
        activeName.value = 3
      }else{
        activeName.value =  0
      }
},{immediate:true})



const column = ref<Array<Column>>([
  {
    title: "",
    dataKey: "userInfo",
    width: 200,
    align: "center",
    slotName: "userInfo",
  },
  { title: "", dataKey: "create_time", width: 180, align: "center" },
  {
    title: "",
    dataKey: "consume",
    width: 180,
    align: "center",
    slotName: "consume",
  },
  {
    title: "",
    dataKey: "rebate",
    width: 180,
    align: "center",
    slotName: "rebate",
  },
]);

const downPoster = () => {
  aDownLoad(publicUrl(`/images/poster-qrcode.jpg`), "推广海报");
};

const userInfo = ref<UserInfo>({
  distribution: {
    sale: 8,
    unsettled: 88,
    accumulate: 5000,
  },
  rebate: {
    unsettled: 50,
    accumulate: 5000,
  },
  gold: 3000,
});

const rebateData = ref<Array<Rebate>>([
  {
    nickName: "前面的风景",
    user_id: "2302200020012022",
    create_time: "2023/1/10 11: 10",
    consume: 10000,
    rebate: 300,
  },
  {
    nickName: "前面的风景",
    user_id: "2302200020012022",
    create_time: "2023/1/10 11: 10",
    consume: 10000,
    rebate: 300,
  },
  {
    nickName: "前面的风景",
    user_id: "2302200020012022",
    create_time: "2023/1/10 11: 10",
    consume: 10000,
    rebate: 300,
  },
  {
    nickName: "前面的风景",
    user_id: "2302200020012022",
    create_time: "2023/1/10 11: 10",
    consume: 10000,
    rebate: 300,
  },
  {
    nickName: "前面的风景",
    user_id: "2302200020012022",
    create_time: "2023/1/10 11: 10",
    consume: 10000,
    rebate: 300,
  },
]);

const copyHandel = (str: string) => {
  toast.success(`复制成功`);
  copy(str);
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
